<template>
   <div class="lineBox">
      <div class="title">
         <p>未来七天游客数量趋势图</p>
         <img src="../../images/dataScreen-title.png" alt="">
      </div>
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
onMounted(() => {
   let mycharts = echarts.init(charts.value)
   // 设置配置项
   mycharts.setOption({
      // 标题组件
      title: {
         text: '访问量',
         left: 'center',
         textStyle: {
            color: '#29fcff',
            fontStyle: 'italic'
         }
      },
      // x|y轴
      xAxis: {
         type: 'category',
         // 两侧不留白
         boundaryGap: false,
         // 隐藏分割线
         splitLine: {
            show: false
         },
         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
         axisTick: {
            show: true
         }
      },
      yAxis: {
         splitLine: {
            show: false
         },
         // 轴线的设置
         axisLine: {
            show: true
         },
         axisTick: {
            show: true
         }
      },
      grid: {
         left: 40,
         right: 20,
         top: 30,
         bottom: 20
      },
      // 系列
      series: [
         {
            type: 'line',
            data: [55, 560, 324, 1502, 424, 2414, 1241],
            smooth: true,
            // 区域填充样式
            areaStyle: {
               origin: 'start',
               color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                     offset: 0,
                     color: 'rgba(252,243,102,0.1)'
                  },
                  {
                     offset: 1,
                     color: 'rgba(252,243,102,0.3)'
                  }
               ])
            },
         }
      ],
      toolbox: {
         show: true,
         feature: {
            saveAsImage: { show: true }
         }
      },
      legend: {
         data: ['访问量']
      },
      tooltip: {
         trigger: 'axis'
      },
   })
})
</script>

<style lang="scss" scoped>
.lineBox {
   background: url(../../images/dataScreen-main-cb.png) no-repeat;
   background-size: cover;
   margin: 0 20px 20px;

   .title {
      p {
         color: white;
         font-size: 20px;
      }
   }

   .charts {
      height: 200px;
   }
}
</style>